<!--  -->
<template>
    <div style="width: 100%;background: #F5F7F9;overflow: hidden">
    <!--采购入库-->
        <div  v-if="formData.wareType == 2">
            <div style="margin-left: 210px;margin-top: 20px;font-size: 18px;font-weight: 600">新增入库（采购入库）</div>
            <div class="form-container" style="margin-left: 200px;margin-top: 20px;background: white;width: 1200px;height: 830px;border-radius: 3px">
                <div style="width: 100%;height: 60px;border-bottom: 3px solid #F5F7F9;line-height: 60px">
                    &nbsp;&nbsp;&nbsp;&nbsp;入库信息
                </div>
                <el-row>
                    <el-col :span="12" style="margin-top: 20px">
                        <el-form ref="form" :model="formData" label-width="120px" size="large">
                            <el-form-item label="入库类型">
                                <el-select v-model="formData.wareType" placeholder="请选择" style="width: 300px">
                                    <el-option label="领用还回" value="1"></el-option>
                                    <el-option label="采购入库" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库主题">
                                <el-input v-model="formData.wareName" size="large" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="采购单号">
                                <el-select v-model="formData.purchaseOrder" placeholder="请选择" style="width: 300px" @change="selByPartsId">
                                    <el-option v-for="spareparts in spareParts" :key="spareparts.spId" :label="spareparts.procureCode" :value="spareparts.spId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="采购人员">
                                <el-input v-model="formData.purchasePerson" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="供应商">
                                <el-input v-model="formData.supplier" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <el-input v-model="formData.contact" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="仓库管理员">
                                <el-input v-model="formData.warehouseAdmin" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="入库申请人">
                                <el-input v-model="formData.applyPerson" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12" style="margin-top: 20px;position: relative;left: 120px">
                        <el-form ref="form" :model="formData" label-width="120px" size="large">
                            <el-form-item label="入库单号">
                                <el-input v-model="formData.storageNumber" size="large" style="width:300px;" placeholder="系统自动生成" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="入库日期">
                                <el-date-picker v-model="formData.storageDate" type="date" placeholder="选择日期" style="width: 300px"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="采购部门">
                                <el-input v-model="formData.purchaseDepartment" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <el-input v-model="formData.contacts" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="联系人">
                                <el-input v-model="formData.contactPerson" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="仓库名称">
                                <el-select v-model="formData.warehouseName" placeholder="请选择" style="width: 300px" @change="warehouses">
                                    <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :label="warehouse.warehouseName" :value="warehouse.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库人员">
                                <el-select v-model="formData.storagePerson" placeholder="请选择" style="width: 300px" @change="selPerson">
                                    <el-option v-for="person in personList" :key="person.peopleManagementId" :label="person.peopleManagementName" :value="person.peopleManagementId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所在部门">
                                <el-input v-model="formData.departmentName" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="form-footer">
                    <textarea v-model="formData.remark" rows="8" placeholder="请输入备注" style="margin-left: 120px;width: 1020px;font-size: 20px"></textarea>
                </div>
            </div>
        </div>

    <!--归还入库-->
        <div v-if="formData.wareType == 1">
            <div style="margin-left: 210px;margin-top: 20px;font-size: 18px;font-weight: 600">新增入库（归还入库）</div>
            <div class="form-container" style="margin-left: 200px;margin-top: 20px;background: white;width: 1200px;height: 630px;border-radius: 3px">
                <div style="width: 100%;height: 60px;border-bottom: 3px solid #F5F7F9;line-height: 60px">
                    &nbsp;&nbsp;&nbsp;&nbsp;入库信息
                </div>
                <el-row>
                    <el-col :span="12" style="margin-top: 20px">
                        <el-form ref="form" :model="formData" label-width="120px" size="large">
                            <el-form-item label="入库类型">
                                <el-select v-model="formData.wareType" placeholder="请选择" style="width: 300px">
                                    <el-option label="领用还回" value="1"></el-option>
                                    <el-option label="采购入库" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库单号">
                                <el-input v-model="formData.storageNumber" size="large" style="width:300px;" placeholder="系统自动生成" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="入库日期">
                                <el-date-picker v-model="formData.storageDate" type="date" placeholder="选择日期" style="width: 300px"></el-date-picker>
                            </el-form-item>
                            <el-form-item label="仓库管理员">
                                <el-input v-model="formData.warehouseAdmin" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="入库申请人">
                                <el-input v-model="formData.applyPerson" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="12" style="margin-top: 20px;position: relative;left: 120px">
                        <el-form ref="form" :model="formData" label-width="120px" size="large">
                            <el-form-item label="归还原因">
                                <el-input v-model="formData.returnReason" size="large" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="入库主题">
                                <el-input v-model="formData.wareName" size="large" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="仓库名称">
                                <el-select v-model="formData.warehouseName" placeholder="请选择" style="width: 300px" @change="warehouses">
                                    <el-option v-for="warehouse in warehouseList" :key="warehouse.id" :label="warehouse.warehouseName" :value="warehouse.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="入库人员">
                                <el-select v-model="formData.storagePerson" placeholder="请选择" style="width: 300px" @change="selPerson">
                                    <el-option v-for="person in personList" :key="person.peopleManagementId" :label="person.peopleManagementName" :value="person.peopleManagementId"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="所在部门">
                                <el-input v-model="formData.departmentName" size="large" style="width:300px;" disabled></el-input>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div class="form-footer">
                    <textarea v-model="formData.remark" rows="9" placeholder="请输入备注" style="margin-left: 120px;width: 1020px;font-size: 20px"></textarea>
                </div>
            </div>
        </div>

        <div>
            <div class="form-container" style="margin-left: 200px;margin-top: 20px;background: white;width: 1200px;height: 730px;border-radius: 3px">
                <div style="width: 100%;height: 60px;border-bottom: 3px solid #F5F7F9;line-height: 60px">
                    &nbsp;&nbsp;&nbsp;&nbsp;入库明细
                </div>
                <div style="margin-left: 10px;margin-top: 20px">
                    <el-button type="success" @click="dialogVisible=true">添加</el-button>
                    <el-button @click="removeRows">移除</el-button>
                </div>
                <div style="margin-top: 10px">
                    <el-table :data="formData.spareList" style="width: 100%" @selection-change="associationSelection">
                        <el-table-column type="selection"  width="50"></el-table-column>
                        <el-table-column label="序号" width="50" prop="spId"></el-table-column>
                        <el-table-column prop="spName"  width="80" label="备件名称" align="center"></el-table-column>
                        <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
                        <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
                        <el-table-column prop="spTypeName" label="备件类型" align="center"></el-table-column>
                        <el-table-column prop="upperInventory" width="80" label="库存上限" align="center"></el-table-column>
                        <el-table-column prop="lowerInventory" width="80" label="库存下限" align="center"></el-table-column>
                        <el-table-column prop="totalInventory" width="80" label="当前库存" align="center"></el-table-column>
                        <el-table-column label="存放位置" align="center">
                            <template slot-scope="{row}">
                                <el-input v-model="row.position" disabled></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="本次入库数量" align="center">
                            <template slot-scope="{row}">
                                <el-input-number v-model="row.receiptQuantity" :min="row.lowerInventory" :max="row.upperInventory-row.totalInventory"></el-input-number>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>

        <el-dialog
                title="选择备件"
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">
            <div>
                <el-input v-model="form.codeName" placeholder="请输入备件编号或备件名称" style="width: 180px"></el-input>
                <el-button @click="chongzhi" style="margin-left: 240px">重 置</el-button>
                <el-form ref="form" :model="form" label-width="100px" style="margin-left: 100px;margin-top: -29px">
                <el-form-item label="">
                    <el-cascader
                            v-model="form.spTypeId"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            clearable
                            expand-trigger="hover"
                            placeholder="请选择"
                    ></el-cascader>
                </el-form-item>
                </el-form>
            </div>
            <el-table :data="spareLists" style="width: 100%" @selection-change="associationSelections">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="序号" width="80" prop="spId"></el-table-column>
                <el-table-column prop="spName" label="备件名称" align="center"></el-table-column>
                <el-table-column prop="spCode" label="备件编码" align="center"></el-table-column>
                <el-table-column prop="spSpecification" label="规格型号" align="center"></el-table-column>
                <el-table-column prop="spTypeName" label="备件类型" align="center"></el-table-column>
                <el-table-column prop="upperInventory" label="库存上限" align="center"></el-table-column>
                <el-table-column prop="lowerInventory" label="库存下限" align="center"></el-table-column>
                <el-table-column prop="totalInventory" label="当前库存" align="center"></el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    :current-page.sync="form.page"
                    :page-size="form.pagesize"
                    :page-sizes="[10, 20, 30, 40]"
                    :total="total"
                    background
                    layout="total, sizes ,prev, pager, next, jumper"
                    style="padding: 30px 0; text-align: center"
                    @current-change="selAllSpareLedger"
                    @size-change="handleSizeChanges"
            />
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="ok">确 定</el-button>
             </span>
        </el-dialog>

        <!--最下面-->
        <div style="width: 100%;height: 50px;background: white;box-shadow: 0px -4px 4px rgb(226,228,229);position:fixed;top: 920px;z-index: 999">
            <div style="margin-left: 700px;margin-top: 15px">
                <el-button @click="closes">关闭</el-button>
                <el-button type="success" @click="okGos()">确认</el-button>
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    //备件类型树形数据
    options:[],
    props: {
        value: 'spId',
        label: 'spTypename',
        children: 'children'
    },
    total:0,
    spareLists:[],
    dialogVisible:false,
    form:{
        codeName:null,
        spTypeId:null,
        page:1,
        pageSize:10
    },
    formData: {
        departmentName:'采购部',
        wareType: '1',
        wareName: '',
        purchaseOrder: '',
        purchasePerson: '',
        supplier: '',
        contact: '',
        warehouseAdmin: '',
        applyPerson: '张三',
        storageNumber: '',
        storageDate: '',
        purchaseDepartment: '',
        contacts: '',
        contactPerson: '',
        warehouseName: '',
        storagePerson: '',
        remark: '',
        spareList:[],
        returnReason:''
    },
    warehouseList: [],
    personList: [],
    list:[],
    vals:[],
    //所有采购单号
    spareParts:[],
    spId:null,
    warehouseCoding:'',
    //添加数据
    addData:{
        spId:'',
        //入库主题
        wareName:null,
        //入库类型
        wareType:null,
        //入库时间
        wareTime:null,
        //仓库ID
        warehouseId:null,
        //采购单号
        purchaseOrder:null,
        //申请人ID
        applicantId:null,
        //入库总量
        totalInbound:0,
        //入库人员ID
        warePersonid:null,
        //归还原因
        returnReason:null,
        //备注
        wareRemark:null,
        //入库明细
        spareList:null,
    }
};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    //todo 此页面需要获取登陆后的人员数据包括入库申请人，和所在部门
    selPerson(val){
        this.addData.warePersonid = val
    },
    warehouses(val){
        this.addData.warehouseId = val
        this.request.get("/system/warehouse-management/selOne/"+val)
        .then(res=>{
            console.log(res)
            this.formData.warehouseAdmin = res.peopleName
            this.warehouseCoding = res.warehouseCoding
        })
        if (this.formData.spareList.length!=null){
            for (let i = 0; i < this.formData.spareList.length; i++) {
                this.formData.spareList[i].position  = this.warehouseCoding
            }
        }
    },
    selByPartsId(val){
        this.request.get("/spare/spare-parts/selByPartsId/"+val)
        .then(res=>{
            this.formData.supplier = res.data.supplierManagement.supplierName
            this.formData.purchasePerson = res.data.peopleVo.peopleManagementName
            this.formData.contact = res.data.peopleVo.cellPhone
            this.formData.contactPerson = res.data.supplierManagement.linkman
            this.formData.contacts = res.data.supplierManagement.contactWay
            this.formData.purchaseDepartment = res.data.peopleVo.departmentName
            this.addData.purchaseOrder = res.data.procureCode
        })
    },
    selAllSpareParts(){
      this.request.get("/spare/spare-parts/selAllSpareParts")
      .then(res=>{
          this.spareParts = res.data
      })
    },
    //提交添加
    okGos(){
        this.addData.wareName = this.formData.wareName
        this.addData.wareType = this.formData.wareType
        this.addData.wareTime = this.formData.storageDate
        //todo 需要获取登入后的人员ID
        this.addData.applicantId = 1
        this.addData.spareList = this.formData.spareList
        this.addData.wareRemark = this.formData.remark
        this.addData.returnReason = this.formData.returnReason
        let a = this.formData.spareList
        for (let i = 0; i < a.length; i++) {
            this.addData.totalInbound = this.addData.totalInbound+a[i].receiptQuantity
        }
        this.addData.spId = this.spId
        if(this.addData.spId!=''){
            this.request.post("/spare/warehousing/updateCollection",this.addData)
                .then(res=>{
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.$router.push('/wareHousing')
                })
        }else {
            this.request.post("/spare/warehousing/insetWareHouse",this.addData)
                .then(res=>{
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.$router.push('/wareHousing')
                })
        }
    },
    closes(){
        this.$router.push('/wareHousing')
    },
    selAllWareHouses(){
      this.request.get("/system/warehouse-management/selAllWareHouses")
        .then(res=>{
            this.warehouseList  = res.data
        })
    },
    //查询人员数据
    selAllPeople(){
        this.request.get("/system/people-management/selAllPeople")
            .then(res=>{
                this.personList = res.data
            })
    },
    removeRows(){
        for (let i = 0; i < this.vals.length; i++) {
            for (let j = 0; j < this.formData.spareList.length; j++) {
                console.log(this.formData.spareList)
                if (this.vals[i].spId == this.formData.spareList[j].spId){
                    this.formData.spareList.splice(j, 1);
                    j = 0;
                }
            }
        }
    },
    ok(){
        for (let i = 0; i < this.list.length; i++) {
            this.formData.spareList.push(this.list[i])
            if (this.warehouseCoding!=''){
                this.formData.spareList[i].position = this.warehouseCoding
            }

        }
        this.dialogVisible = false
    },
    handleChange(value) {
        console.log(value)
    },
    chongzhi(){
      this.form.codeName = null
      this.form.spTypeId = null
      this.selAllSpareLedger()
    },
    //分页跳转数据
    handleSizeChanges(pageSize) {
        this.form.pagesize = pageSize;
        this.selAllSpareLedger();
    },
    showPurchaseOrderDialog() {
        // TODO: 弹出采购单号选择框
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
                done();
            })
            .catch(_ => {});
    },
    //备件类型树形查询
    selAllSpareType(){
        this.request.get("/spare/spare-types/selAllSpareType")
            .then(res=>{
                this.options = res.data
            })
    },
    selAllSpareLedger(){
        this.request.post("/spare/spare-ledger/selAllSpareLedger",this.form)
            .then(res=>{
                this.spareLists = res.data.items
                this.total = res.data.counts
            })
    },
    associationSelection(val){
        this.vals = val
    },
    associationSelections(val){
        this.list = val
    },
    selOneCollecting(){
        this.request.get("/spare/warehousing/selOneCollecting/"+this.spId)
        .then(res=>{
            console.log(res)
            this.formData = res.data
        })
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    this.selAllSpareType()
    this.selAllSpareLedger()
    this.selAllWareHouses()
    this.selAllPeople()
    this.selAllSpareParts()
    this.formData.wareType = this.$route.query.type
    this.spId = this.$route.query.id
    if (this.spId!=null){
        this.selOneCollecting()
    }
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>

</style>
